<div class="base-statistic">
    <ng-container *ngIf="statType == 'irrArea'">
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img src="./assets/images/searchMaintain/placeholder-icon.png" alt="">
                        </div>
                        <p class="main-num">
                            {{baseList.length}}
                        </p>

                    </div>
                    <p class="bottom-box">灌区数量（个）</p>
                </div>
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img src="./assets/images/searchMaintain/placeholder-icon.png" alt="">
                        </div>
                        <p class="main-num">
                            {{irrData.totalIrrArea}}
                        </p>

                    </div>
                    <p class="bottom-box">总灌溉面积（万亩）</p>
                </div>
            </div>
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img src="./assets/images/searchMaintain/placeholder-icon.png" alt="">
                        </div>
                        <p class="main-num">
                            {{irrData.lengthSum}}
                        </p>

                    </div>
                    <p class="bottom-box">干渠长度（千米）</p>
                </div>
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img src="./assets/images/searchMaintain/placeholder-icon.png" alt="">
                        </div>
                        <p class="main-num">
                            {{irrData.maxInlet}}
                        </p>

                    </div>
                    <p class="bottom-box">最大引水能力（m³/s）</p>
                </div>
            </div>
        </div>
        <div echarts
             [options]="verticalBarOpt"
             [merge]="irrOptChange"
             style="height: 320px;"></div>
    </ng-container>
    <ng-container *ngIf="statType == 'office'">
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">管理处数量（个）</p>
                </div>
            </div>
        </div>
        <div class="stat-office">
            <div class="title">灌溉面积(万亩)</div>
            <div class="chart">
                <div nz-row nzGutter="12" *ngFor="let item of officeOptChange1">
                    <div nz-col nzSpan="6" class="name">{{ item.name }}</div>
                    <div nz-col nzSpan="14">
                        <nz-progress
                            [nzPercent]="item.percent"
                            [nzStrokeColor]="item.color"
                            [nzShowInfo]="false"
                        ></nz-progress>
                    </div>
                    <div nz-col nzSpan="4" class="area">{{ item.area }}</div>
                </div>
            </div>
        </div>
        <div class="stat-office">
            <div class="title">年平均引水能力(亿m³)</div>
            <div class="chart">
                <div nz-row nzGutter="12" *ngFor="let item of officeOptChange2">
                    <div nz-col nzSpan="6" class="name">{{ item.name }}</div>
                    <div nz-col nzSpan="14">
                        <nz-progress
                            [nzPercent]="item.percent"
                            [nzStrokeColor]="item.color"
                            [nzShowInfo]="false"
                        ></nz-progress>
                    </div>
                    <div nz-col nzSpan="4" class="area">{{ item.area | number:'1.2-2' }}</div>
                </div>
            </div>
        </div>
        <!-- <div
          echarts
          [options]="scatterOpt"
          [merge]="officeOptChange2"
          style="height: 300px;"
        ></div> -->
    </ng-container>
    <ng-container *ngIf="statType == 'station'">
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">管理所数量（个）</p>
                </div>
            </div>
        </div>
        <div
            echarts
            [options]="verticalBarOpt"
            [merge]="stationOptChange1"
            style="height: 320px;"
        ></div>
        <div
            echarts
            [options]="verticalBarOpt"
            [merge]="stationOptChange2"
            style="height: 320px;"
        ></div>
    </ng-container>
    <ng-container *ngIf="statType == 'ganqu'">
        <!--<div nz-row nzGutter="16" class="stat-count">-->
        <!--<span nz-col nzSpan="12">渠道总数: {{ baseList.length }} 条</span>-->
        <!--<span nz-col nzSpan="12"-->
        <!--&gt;渠道总长度: {{ ganquData.lengthSum }} km</span-->
        <!--&gt;-->
        <!--</div>-->
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">渠道数量（条）</p>
                </div>
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ ganquData.lengthSum }}
                        </p>
                    </div>
                    <p class="bottom-box">渠道总长度（km）</p>
                </div>
            </div>
        </div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="ganquOptChange1"
            style="height: 260px;"
        ></div>
        <div
            echarts
            [options]="verticalBarOpt"
            [merge]="ganquOptChange2"
            style="height: 260px;"
        ></div>
    </ng-container>

    <ng-container *ngIf="statType == 'section'">
        <!--<div nz-row nzGutter="16" class="stat-count">-->
        <!--<span nz-col nzSpan="12">测水断面数量: {{ baseList.length }}</span>-->
        <!--<span nz-col nzSpan="12"-->
        <!--&gt;控制灌溉面积: {{ sectionData.areaSum }} 万亩</span-->
        <!--&gt;-->
        <!--</div>-->
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">测水断面数量（个）</p>
                </div>
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ sectionData.areaSum }}
                        </p>
                    </div>
                    <p class="bottom-box">控制灌溉面积（万亩）</p>
                </div>
            </div>
        </div>
        <app-common-stat [type]="statType" [list]="baseList"></app-common-stat>
    </ng-container>
    <ng-container
        *ngIf="
      statType == 'jinshuizha' ||
      statType == 'jiezhizha' ||
      statType == 'tuishuizha' ||
      statType == 'zhikaikou'
    "
    >
        <app-gate-stat [type]="statType" [list]="baseList"></app-gate-stat>
    </ng-container>
    <ng-container *ngIf="statType == 'bengzhan'">
        <!--<div nz-row nzGutter="16" class="stat-count">-->
        <!--<span nz-col nzSpan="12">泵站数量: {{ baseList.length }} 座</span>-->
        <!--<span nz-col nzSpan="12"-->
        <!--&gt;控制灌溉面积: {{ pumpData.areaSum }} 万亩</span-->
        <!--&gt;-->
        <!--</div>-->
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">泵站数量（座）</p>
                </div>
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ pumpData.areaSum }}
                        </p>
                    </div>
                    <p class="bottom-box">控制灌溉面积（万亩）</p>
                </div>
            </div>
        </div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="pumpFlowOptChange"
            style="height: 260px;"
        ></div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="pumpCapacityOptChange"
            style="height: 260px;"
        ></div>
    </ng-container>
    <ng-container *ngIf="statType == 'dieshui'">
        <!--<div nz-row nzGutter="16" class="stat-count">-->
        <!--<span nz-col nzSpan="24">跌水数量: {{ baseList.length }} 座</span>-->
        <!--</div>-->
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">跌水数量（座）</p>
                </div>
            </div>
        </div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="dieshuiOptChange1"
            style="height: 260px;"
        ></div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="dieshuiOptChange2"
            style="height: 260px;"
        ></div>
    </ng-container>
    <ng-container *ngIf="statType == 'zhihongqu'">
        <!--<div nz-row nzGutter="16" class="stat-count">-->
        <!--<span nz-col nzSpan="24">滞洪区数量: {{ baseList.length }} 座</span>-->
        <!--</div>-->
        <div class="general-data-card">
            <div class="grid">
                <div class="grid-card">
                    <div class="top-box">
                        <div class="img-box">
                            <img
                                src="./assets/images/searchMaintain/placeholder-icon.png"
                                alt=""
                            />
                        </div>
                        <p class="main-num">
                            {{ baseList.length }}
                        </p>
                    </div>
                    <p class="bottom-box">滞洪区数量（座）</p>
                </div>
            </div>
        </div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="zhihongquOptChange1"
            style="height: 260px;"
        ></div>
        <div
            echarts
            [options]="scatterOpt"
            [merge]="zhihongquOptChange2"
            style="height: 260px;"
        ></div>
    </ng-container>
    <ng-container
        *ngIf="
      statType == 'paishuigou' ||
      statType == 'handong' ||
      statType == 'ducao' ||
      statType == 'qiaoliang' ||
      statType == 'yiliuyan' ||
      statType == 'shanhonggou'
    "
    >
        <app-common-stat [type]="statType" [list]="baseList"></app-common-stat>
    </ng-container>
    <ng-container *ngIf="statType == 'gyysdw'">
      <div class="general-data-card">
          <div class="grid">
              <div class="grid-card">
                  <div class="top-box">
                      <div class="img-box">
                          <img
                              src="./assets/images/searchMaintain/placeholder-icon.png"
                              alt=""
                          />
                      </div>
                      <p class="main-num">
                          {{ baseList.length }}
                      </p>
                  </div>
                  <p class="bottom-box">工业取水单位数量（个）</p>
              </div>
          </div>
      </div>
    </ng-container>
    <ng-container *ngIf="qskMapper[statType]">
      <div class="general-data-card">
          <div class="grid">
              <div class="grid-card">
                  <div class="top-box">
                      <div class="img-box">
                          <img
                              src="./assets/images/searchMaintain/placeholder-icon.png"
                              alt=""
                          />
                      </div>
                      <p class="main-num">
                          {{ baseList.length }}
                      </p>
                  </div>
                  <p class="bottom-box">{{ qskMapper[statType] }}取水口数量（个）</p>
              </div>
          </div>
      </div>
    </ng-container>
    <ng-container *ngIf="dmMapper[statType]">
      <div class="general-data-card">
          <div class="grid">
              <div class="grid-card">
                  <div class="top-box">
                      <div class="img-box">
                          <img
                              src="./assets/images/searchMaintain/placeholder-icon.png"
                              alt=""
                          />
                      </div>
                      <p class="main-num">
                          {{ baseList.length }}
                      </p>
                  </div>
                  <p class="bottom-box">{{ dmMapper[statType] }}数量（个）</p>
              </div>
          </div>
      </div>
    </ng-container>
</div>
